<template>
    <div class="bge5 w100p lh40">
        <div class="_container_ c666 fs14 clearfix pr18 pl10">
            <div class="fl media_disnone">
                <span class="pr30">欢迎来到~</span>
                <span class="pr30" v-html="names"></span>
                <span class="pr30" v-html="today"></span>
                <span class="pr30" v-html="week"></span>
            </div>
            <div class="fr textr scale_ercode login">
              <!--  <div class="pr43 postionre disinblock wx curpointer">
                    <i class="iconfont icon-weixin fs20 c999 pr10"></i>微信
                    <img :src="wx" alt="" class="w128 h128 postionab ercode left0">
                </div>
                <div class="pr38 disinblock wb curpointer postionre">
                    <i class="iconfont icon-sina fs20 c999 pr10"></i>微博
                    <img :src="wb" alt="" class="w128 h128 postionab ercode">
                </div>-->
                <span v-if="!loginuser">
                    <i class="hoverred pr10" @click="loginshow=true">登录</i> | <i class="hoverred pl10" @click="registershow=true">注册</i>
                </span>
                <span v-if="loginuser">
                    <i class="hoverred pr10 curpointer cred" v-html="loginuser"></i> | <i class="hoverred pl10 curpointer" @click="logOut">退出登录</i>
                </span>
            </div>
        </div>
        <!--登录-->
        <el-dialog
                class="loginbox"
                title="欢迎登录"
                :visible.sync="loginshow"
                :before-close="handleClose"
                v-loading="loading==1"
                element-loading-text="拼命登录中"
                element-loading-spinner="el-icon-loading"
                element-loading-background="rgba(0, 0, 0, 0.8)"
                width="4.1rem">
            <div class="bgf5 lh45 pl17 fs16 mb35">
                <span class="iconfont icon-shouji fs20 lh45 caaa"></span>
                <input type="text" v-model="tel" class="pl11 pr10 lh45 bgf5" placeholder="请输入手机号" @keyup.enter="confirmLogin">
            </div>
            <div class="bgf5 lh45 pl17 fs16 mb18">
                <span class="iconfont icon-mima fs20 lh45 caaa"></span>
                <input type="password" v-model="pwd" class="pl11 pr10 lh45 bgf5" placeholder="请输入登录密码" @keyup.enter="confirmLogin">
            </div>
            <div class="fs14 cred disflex jusbet lh35 mb40">
                <span class="curpointer" @click="changeShowBox('registershow','loginshow')">
                    <i class="c333">没有账号</i>?立即注册
                </span>
                <span class="curpointer" @click="changeShowBox('changepwdshow','loginshow')">忘记密码?</span>
            </div>
            <button class="w100p boradius1 bgred textc lh45 cfff curpointer media_fs22px media_lh60px" @click="confirmLogin">立即登录</button>
        </el-dialog>
        <!--注册-->
        <el-dialog
                class="loginbox"
                title="欢迎注册"
                :visible.sync="registershow"
                :before-close="handleClose"
                v-loading="loading==2"
                element-loading-text="拼命注册中"
                element-loading-spinner="el-icon-loading"
                element-loading-background="rgba(0, 0, 0, 0.8)"
                width="4.1rem">
            <div class="bgf5 lh45 pl17 fs16 mb25">
                <span class="iconfont icon-icon-user-copy fs20 lh45 caaa"></span>
                <input type="text" v-model="username" class="pl11 pr10 lh45 bgf5" placeholder="请输入您的姓名" @keyup.enter="confirmRegister">
            </div>
            <div class="bgf5 lh45 pl17 fs16 mb25">
                <span class="iconfont icon-shouji fs20 lh45 caaa"></span>
                <input type="text" v-model="tel" class="pl11 pr10 lh45 bgf5" placeholder="请输入手机号"  @keyup.enter="confirmRegister">
            </div>
            <div class="bgf5 lh45 pl17 fs16 mb25">
                <span class="iconfont icon-mima fs20 lh45 caaa"></span>
                <input type="password" v-model="pwd" class="pl11 pr10 lh45 bgf5" placeholder="请输入登录密码"  @keyup.enter="confirmRegister">
            </div>
            <div>
                <textarea name="" id="" class="w100p p1517 fs16 c999 bgf5 h110 h100"
                          v-model="text"
                          placeholder="输入您的货物买卖需求"
                          @keyup.enter="confirmRegister"
                ></textarea>
            </div>

            <div class="fs14 cred lh35 mb25 textc">
                <span class="curpointer" @click="changeShowBox('loginshow','registershow')">
                    <i class="c333">已有账号</i>?立即登录
                </span>
            </div>

            <button class="w100p boradius1 bgred textc lh45 cfff curpointer media_fs22px media_lh60px" @click="confirmRegister">注册</button>
        </el-dialog>
        <!--修改密码-->
        <el-dialog
                class="loginbox"
                title="忘记密码"
                :visible.sync="changepwdshow"
                :before-close="handleClose"
                v-loading="loading==3"
                element-loading-text="拼命加载中"
                element-loading-spinner="el-icon-loading"
                element-loading-background="rgba(0, 0, 0, 0.8)"
                width="4.1rem">
            <div class="bgf5 lh45 pl17 fs16 mb35">
                <span class="iconfont icon-shouji fs20 lh45 caaa"></span>
                <input type="text" v-model="tel" class="pl11 pr10 lh45 bgf5" placeholder="请输入手机号" @keyup.enter="confirmpwd">
            </div>
            <div class="bgf5 lh45 pl17 fs16 mb18">
                <span class="iconfont icon-mima fs20 lh45 caaa"></span>
                <input type="password" v-model="pwd" class="pl11 pr10 lh45 bgf5" placeholder="请输入新的登录密码" @keyup.enter="confirmpwd">
            </div>
            <div class="fs14 cred textr lh35 mb40">
                <span class="curpointer" @click="changeShowBox('loginshow','changepwdshow')">登录</span>
            </div>
            <button class="w100p boradius1 bgred textc lh45 cfff curpointer media_fs22px media_lh60px" @click="confirmpwd">确定</button>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        name: "TopInfo",
        props:['names','wx','wb'],
        data(){
            return{
                loginshow:false,
                registershow:false,
                changepwdshow:false,
                tel:'',
                pwd:'',
                username:'',
                text:'',
                loading:0,
                loginuser:'',
                today:'',
                week:''
            }
        },
        created(){
            this.loginuser = localStorage.getItem('zhzluser') || '';
            var time = new Date() ,
                year = '',
                month = '',
                day = '',
                _week = '';
            year = time.getFullYear();
            month = ('0'+ (time.getMonth() + 1 )).slice(-2);
            day = time.getDate();
            _week = time.getDay();
            this.today = '今天是' + year + '年' + month + '月' + day + '日';
            switch (_week){
                case 1 :
                    _week = '一';
                    break;
                case 2 :
                    _week = '二';
                    break;
                case 3 :
                    _week = '三';
                    break;
                case 4 :
                    _week = '四';
                    break;
                case 5 :
                    _week = '五';
                    break;
                case 6 :
                    _week = '六';
                    break;
                case 7 :
                    _week = '日';
                    break;

            }
            this.week = '星期' + _week;
        },
        methods:{
            changeShowBox(show,close){
                this[close] = false;
                this[show] = true;
            },
            handleClose(){
                this.tel = '';
                this.pwd = '';
                this.username = '';
                this.loginshow = false;
                this.registershow = false;
                this.changepwdshow = false;
            },
            confirmLogin(){
                var v = this;
                if(!v.tel.trim()){
                    this.$message.error('请输入手机号！');
                    return
                }
                if(!v.pwd.trim()){
                    this.$message.error('请输入密码！');
                    return
                }
                if(!v.$telReg(v.tel.trim())){
                    this.$message.error('请输入正确的手机号！');
                    return
                }
                if(!v.$pwdReg(v.pwd.trim())){
                    this.$message.error('请输入6-21位密码，不能是纯数字或纯字母！');
                    return
                }
                v.loading = true;
                var params = new FormData();
                params.append('mobile',v.tel.trim());
                params.append('password',v.pwd.trim());
                v.$axios.post('/index.php?g=user&m=login&a=dologin',params)
                    .then((res) => {
                        v.loading = false;
                        res = res.data;
                        if (res.result == 1) {
                            v.$message.success(res.msg || '登录成功！');
                            v.loginuser = v.tel.slice(0,5)+'...';
                            localStorage.setItem('zhzluser',v.loginuser);
                            v.loginshow = false;
                        } else {
                            v.$message.error(res.msg || '登录失败！');
                        }
                    }).catch((err) => {
                        console.log(err);
                        v.$message.error('登录失败！');
                        v.loading = false;
                });
            },
            confirmRegister(){
                var v = this;
                if(!v.username.trim()){
                    this.$message.error('请输入您的姓名！');
                    return
                }
                if(!v.tel.trim()){
                    this.$message.error('请输入手机号！');
                    return
                }
                if(!v.pwd.trim()){
                    this.$message.error('请输入密码！');
                    return
                }
                if(!v.$telReg(v.tel.trim())){
                    this.$message.error('请输入正确的手机号！');
                    return
                }
                if(!v.text.trim()){
                    this.$message.error('请输入您的购买需求！');
                    return
                }
                v.loading = true;
                var params = new FormData();
                params.append('mobile',v.tel.trim());
                params.append('password',v.pwd.trim());
                params.append('nickname',v.username.trim());
                params.append('text',v.text.trim());
                v.$axios.post('/index.php?g=user&m=register&a=doregister',params)
                    .then((res) => {
                        res = res.data;
                        v.loading = false;
                        if (res.result == 1) {
                            v.$message.success(res.msg || '注册成功！现在去登录');
                            v.pwd = '';
                            v.username = '';
                            v.text = '';
                            v.registershow = false;
                            v.loginshow = true;
                            // v.partner = res.partner;
                        } else {
                            v.$message.error(res.msg || '注册失败！请稍后再试');
                        }
                    }).catch((err) => {
                    console.log(err);
                    v.loading = false;
                    v.$message.error('注册失败！请稍后再试');

                });
            },
            confirmpwd(){
                var v = this;
                if(!v.tel.trim()){
                    this.$message.error('请输入手机号！');
                    return
                }
                if(!v.pwd.trim()){
                    this.$message.error('请输入新的密码！');
                    return
                }
                if(!v.$telReg(v.tel.trim())){
                    this.$message.error('请输入正确的手机号！');
                    return
                }
                if(!v.$pwdReg(v.pwd.trim())){
                    this.$message.error('请输入6-21位密码，不能是纯数字或纯字母！');
                    return
                }
                var params = new FormData();
                params.append('mobile',v.tel.trim());
                params.append('password',v.pwd.trim());
                v.$axios.post('/index.php?g=user&m=register&a=back_password',params)
                    .then((res) => {
                        res = res.data;
                        if (res.result == 1) {
                            v.$message.success(res.msg || '修改成功！现在去登录');
                            localStorage.removeItem('zhzluser');
                            v.pwd = '';
                            v.changepwdshow = false;
                            v.loginshow = true;
                            // v.partner = res.partner;
                        } else {
                            v.$message.error(res.msg || '修改失败！');
                        }
                    }).catch((err) => {
                    v.$message.error('修改失败！');
                    this.changepwdshow = false;
                });
            },
            logOut(){
                var v = this,
                    params = new FormData();
                v.$axios.post('/index.php?g=user&m=login&a=out_login')
                    .then((res) => {
                        res = res.data;
                        if (res.result == 1) {
                            v.$message.success(res.msg || '退出成功！');
                            v.loginshow = false;
                            localStorage.removeItem('zhzluser');
                        } else {
                            v.$message.error(res.msg || '失败！');
                        }
                    }).catch((err) => {
                    v.$message.error('失败！');
                    this.changepwdshow = false;
                });
            }
        }
    }
</script>

<style>
    .loginbox .el-dialog__title{
        font-size: .3rem;
        color: #333;
    }
    .loginbox .el-dialog__header{
        text-align: center;
    }
    .loginbox .el-dialog{
        padding-bottom: .8rem;
        overflow: hidden;
    }
    .loginbox .el-dialog__headerbtn{
        width: .82rem;
        height: .82rem;
        background: #bf000e;
        border-radius: 50%;
        right: -.29rem;
        top: -.29rem;
    }
    .loginbox .el-dialog__headerbtn .el-dialog__close{
        font-size: .3rem;
        color: #fff;
        position: absolute;
        left: .15rem;
        bottom: .15rem;
    }
    .ercode{
        left: -1.28rem;
        top: 0;
        transform: scale(0);
        transform-origin:right top;
        transition: .2s;
    }
    .login .ercode{
        left: 0;
        top: .4rem;
        transform-origin:left top;
    }
    .scale_ercode .wx:hover img,.scale_ercode .wb:hover img{
        transform: scale(1);
    }
</style>
















